{extend name='admin@layouts/container'}

{block name='content'}
<div class="layui-card">
  <div class="layui-card-body">
    <table class="layui-table" lay-filter="stock-goods">
      <thead>
        <tr>
          <th>商品名称</th>
          <th width="100">总库存</th>
          <th width="100">已用库存</th>
          <th width="120">剩余库存</th>
          <th width="100">预警阈值</th>
          <th width="100">库存状态</th>
          <th width="160">操作</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
<script>
  layui.use(['table'], function () {
    layui.table.render({
      elem: '.layui-table',
      url: '{$access_url}',
      page: true,
      cols: [[
        { field: 'name', title: '商品名称' },
        { field: 'total', title: '总库存', align: 'center' },
        { field: 'used', title: '已用库存', align: 'center' },
        { field: 'remaining', title: '剩余库存', align: 'center' },
        { field: 'threshold', title: '预警阈值', align: 'center' },
        { field: 'status', title: '库存状态', align: 'center', templet: '#statusTpl' },
        { title: '操作', align: 'center', toolbar: '#operateTpl' }
      ]]
    });
  });
</script>

<!-- 操作按钮模板 -->
<script type="text/html" id="operateTpl">
    <button class="layui-btn layui-btn-xs" lay-event="add">入库</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="use">出库</button>
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="logs">流水</button>
</script>
{/block}